<template>
	<view class="index pages">
		<!-- 头部固定导航 -->
		<view class="nav_top">
			<!-- 顶部空余 -->
			<view style="width:100%;height: var(--status-bar-height)"></view>
			<!-- 搜索部分 -->
			<view class="search">
				<image :src="logo" mode="heightFix"></image>
				<view class="left" @click="go('/pages/shop/index/search')">
					<uni-icons type="search" color="#646464" style='margin-right: 8rpx;' size="20"></uni-icons>
					<swiper vertical="true" interval="2000" circular="true" disable-touch="true" autoplay="true"
						style="width: 320rpx;height: 60rpx;line-height: 60rpx;">
						<swiper-item v-for="item in list1">{{item.name}}</swiper-item>
					</swiper>
				</view>
				<view class="right">
					<view class="line"></view>
					<view class="search_text" @click="go('/pages/shop/index/search')">{{$t('index.index.Search')}}
					</view>
				</view>
			</view>
			<!-- tab栏切换部分 -->
			<view class="nav_tabs">
				<view class="left_tab">
					<u-tabs @click="change_tab" :list="list1" lineHeight="8rpx" lineWidth="60rpx" lineColor="#16a5af"
						:activeStyle="{
					            color: '#030303',
					            fontWeight: 'bold',
					            transform: 'scale(1.15)'
					        }" :inactiveStyle="{
					            color: '#3a3a3a',
					            transform: 'scale(1)'
					        }" itemStyle="height: 120rpx;" :current='tab_item'>
					</u-tabs>
				</view>
				<!-- <view class="alltype" @click="go('/pages/shop/index/allType')">
          <uni-icons style='margin-right: 5rpx;' type="bars" size="15" color="#7e7e7e"></uni-icons>
          <view class="text">{{$t('index.index.Classify')}}</view>
        </view> -->
			</view>
		</view>
		<view class="empty"></view>
		<!-- 除导航固定的所有部分 -->
		<view class="center_switch">
			<!-- swiper满屏 -->
			<swiper class="swiper" disable-touch="true" circular="true" :current="swiper_item" @change='change'>
				<!-- 各个分类 -->
				<swiper-item class="swiper_item">
					<!-- 优惠券(删除掉：直接注释会报错——>display: none) -->
					<view class="coupon" @click="showNew" v-if="!!NewList" style="display: none;">
						<view class="coupon_content">
							<view style="width: 25%;position: relative;height: 160rpx;">
								<view class="coupon_min">{{$t('index.index.Highest')}}</view>
								<view
									style="line-height: 160rpx;text-align: center;font-size: 60rpx;font-weight: bold;color: #0CD1D3;">
									<text style="font-size: 36rpx;">￥</text>{{NewList.total_money}}
								</view>
							</view>
							<view class="coupon_text" style="width: 55%;">
								<view>{{$t('index.index.Exclusive')}}</view>
								<view style="font-size: 30rpx;font-weight: normal;">{{$t('index.index.A')}}</view>
							</view>
							<view class="coupon_box" style="width: 20%;">
								<view>{{$t('index.index.Collar')}}</view>
							</view>
						</view>
					</view>
					<!-- 轮播 -->
					<swiper style="width: 98%;height: 250rpx;margin: 10rpx auto 20rpx;" :autoplay="true"
						:interval="3000" :circular="true">
						<swiper-item v-for="item in bannerList" :key="item.id" @click="goOut(item)">
							<image style="width: 100%;height: 250rpx;" :src="item.image"></image>
						</swiper-item>
					</swiper>
					<!-- 单个分类，如男鞋，女鞋，儿童鞋 -->
					<!-- <view class="single_type">
            <view class="single_type_item" @click="goSearch(qiang)">
              <view class="img">
                <image mode="widthFix" :src="qiang.image"></image>
              </view>
              <view class="text">{{qiang.name}}</view>
            </view>
            <view class="single_type_item" v-for="item in singleList" @click="goSearch(item)">
              <view class="img">
                <image mode="widthFix" :src="item.image"></image>
              </view>
              <view class="text">{{item.name}}</view>
            </view>
            <view class="single_type_item" @click="toAllType">
              <view class="img">
                <image mode="widthFix" src="@/static/shop/img/index/more.png"></image>
              </view>
              <view class="text">{{$t('index.index.More')}}</view>
            </view>
          </view> -->
					<!-- 商品列表 -->
					<goods :goodList="goodList"></goods>
				</swiper-item>
			</swiper>
		</view>
		<!-- 优惠券弹窗 -->
		<coupon ref="coupon" :NewList="NewList"></coupon>
		<!-- 底部tabbar -->
		<tab-bar isActive="1"></tab-bar>
		<view class="mask" v-if="isShow"></view>
		<view class="popup" v-if="isShow">
			<view style="font-size: 30rpx;text-align: center;">{{noticeName}}</view>
			<view style="margin-top: 30rpx;white-space:pre-wrap;max-height: 300px;overflow: auto;">{{noticeContent}}
			</view>
			<view class="caozuo" @click="closePop">{{$t('index.index.Confrim')}}</view>
		</view>
	</view>

</template>
<script>
	import {
		shopCate,
		cateList,
		goodList,
		couponGetNewList,
		getBanner,
		Notice,
		getLogo,
		getSetting
	} from '@/api/api.js'
	import coupon from "@/components/shop/coupon/coupon.vue"
	import goods from "@/components/shop/goods/goods.vue"
	import tabBar from "@/components/shop/tabBar/tabBar.vue"
	export default {
		components: {
			tabBar,
			goods,
			coupon
		},
		data() {
			return {
				NewList: null,
				page: 1,
				// 默认一级分类
				firstId: null,
				// 默认二级分类
				secondId: '',
				// 默认三级分类
				cateId: '',
				// 商品列表
				goodList: [],
				// tab栏默认项
				tab_item: 0,
				// swiper默认项
				swiper_item: 0,
				list1: [],
				singleList: [],
				bannerList: [],
				isShow: false,
				notice: [],
				noticeName: '',
				noticeContent: '',
				logo: '',
				qiang: {},
				qianggou_cate_id: null
			}
		},
		onLoad(opt) {
			getSetting().then(res => {
				this.logo = res.data.data.logo
				this.qianggou_cate_id = res.data.data.qianggou_cate_id
				this.list1 = [{
					name: res.data.data.product_all_name,
					id: 0,
					first_id: 0,
					second_id: 0
				}]
				this.getNav()
			})
			if (opt.frist) {
				this.getNotice()
			}
			this.showNew()
			couponGetNewList({
				token: uni.getStorageSync('token')
			}).then(res => {
				if (!!res.data.data.list) {
					this.NewList = res.data.data
				}
			})
			this.GetBanner()
		},
		//触底加载更多
		onReachBottom() {
			this.page++;
			this.getGoodsList()
		},
		methods: {
			toAllType() {
				uni.navigateTo({
					url: `/pages/shop/index/allType?type=${this.firstId}`
				})
			},
			goSearch(item) {
				uni.navigateTo({
					url: `/pages/shop/index/search?idArr=${JSON.stringify(item)}`
				})
			},
			go(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 刚加载展示红包
			showNew() {
				this.$nextTick(() => {
					let child = this.$refs.coupon
					child.showNew()
				})
			},
			// 获取轮播图
			GetBanner() {
				getBanner({
					type: 2
				}).then(res => {
					this.bannerList = res.data.data
				})
			},
			// 点击轮播图打开新窗口
			goOut(i) {
				if (i.url) {
					window.open(i.url)
				}
			},
			// 公告弹窗
			getNotice() {
				Notice({
					type: 2
				}).then(res => {
					this.notice = res.data.data
					this.noticeName = this.notice[0].name
					this.noticeContent = this.notice[0].content
					if (this.notice.length > 0) {
						this.isShow = true
					}
				})
			},
			// 点击关闭弹框
			closePop() {
				this.isShow = false
			},
			// 获取首页分类
			getNav() {
				shopCate({
					first_id: 0
				}).then(res => {
					this.list1 = [...this.list1, ...res.data.data]
					for (var j = 0; j < this.list1.length; j++) {
						if (this.qianggou_cate_id == this.list1[j].id) {
							this.qiang = this.list1[j]
							this.list1.splice(j, 1);
						}
					}
					this.firstId = this.list1[0].id
					this.getNavlist(this.firstId)
				})
			},
			// 二级
			getNavlist(id) {
				cateList({
					first_id: id
				}).then(res => {
					this.singleList = res.data.data
					if (this.singleList.length > 3) {
						this.singleList = this.singleList.slice(0, 3)
					}
					this.getGoodsList()
				})
			},
			// 获取goodslist
			getGoodsList() {
				goodList({
					first_id: this.firstId,
					second_id: '',
					cate_id: '',
					page: this.page,
					keywords: '',
					listorder: 'default'
				}).then(res => {
					if (res.data.data.data.length > 0) {
						this.goodList = this.goodList.concat(res.data.data.data);
					} else {
						this.page--;
						uni.showToast({
							title: this.$t('general.There'),
							icon: "none"
						})
					}
				})
			},
			// tab切换
			change_tab(item) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
				})
				this.page = 1
				this.goodList = []
				this.firstId = item.id
				this.getNavlist(this.firstId)
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 60rpx !important;
	}

	.mask-nav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		width: 100%;
		height: 120rpx;
	}

	.index {
		padding-bottom: 140rpx;
	}

	.nav_top {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		background-color: #fff;

		.search {
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			padding: 20rpx;
			box-shadow: 0 0 10px 1px rgba(0, 0, 0, .2);
			margin-bottom: 10rpx;

			image {
				height: 70rpx;
			}

			.left {
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				background-color: #f5f5f9;
				margin-left: 20rpx;
			}

			.right {
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				font-size: 26rpx;
				flex-shrink: 0;
				background-color: #f5f5f9;

				.line {
					width: 1rpx;
					height: 28rpx;
					background-color: #b1b1b1;
					margin: 0 16rpx;
				}

				.search_text {
					font-weight: bold;
				}
			}
		}

		.nav_tabs {
			padding: 0 15rpx;

			.alltype {
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: -35rpx 0rpx 35rpx #fff;
				background-color: #fff;

				.text {
					font-size: 28rpx;
				}
			}
		}
	}

	.swiper_item {
		padding-top: 200rpx;
		overflow-y: auto !important;
	}

	.center_switch {
		margin-top: 50rpx;
		width: 100%;

		.swiper {
			width: 100%;
			height: 100vh;
		}

		.coupon {
			background-color: #0CD1D3;
			padding: 20rpx;
			box-sizing: border-box;

			.coupon_content {
				background-color: #fff;
				display: flex;
				align-items: center;
				height: 160rpx;

				.coupon_min {
					position: absolute;
					top: 0;
					left: 0;
					background-color: #E6FFFE;
					color: #0CD1D3;
					font-size: 20rpx;
					padding: 5rpx 10rpx;
				}

				.coupon_text {
					height: 160rpx;
					border-left: #0CD1D3 1px dashed;
					padding: 30rpx;
					box-sizing: border-box;
					font-size: 40rpx;
					font-weight: bold;
				}

				.coupon_box {
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&>view {
						width: 110rpx;
						height: 110rpx;
						background-color: #FBDAB5;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 60rpx;
						font-size: 50rpx;
						font-weight: bold;
						color: #6C332A;
					}
				}
			}

		}

		.switch_banner {
			width: 100%;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;

			.banner_item {
				width: 49%;
				height: 230rpx;
				background-image: linear-gradient(90deg, #ffecf0, #d5fdff);

				.top {
					width: 100%;
					display: flex;
					margin-top: 10rpx;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;

					.top_left_title {
						width: 50%;
						display: flex;
						justify-content: center;
					}

					.top_right_title {
						width: 50%;
						display: flex;
						justify-content: center;
					}
				}

				.bottom {
					width: 100%;
					display: flex;
					justify-content: space-between;
					background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff, #fff, #fff, #fff, #fff);

					.bottom_item {
						width: 50%;
						font-size: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.img {
							width: 100%;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: flex-end;

							image {
								width: 113rpx;
							}
						}

						.old_price {
							color: #7d7d7d;
						}

						.new_price {
							margin-top: 10rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}
			}
		}
	}


	.single_type {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.single_type_item {
			width: 20%;
			height: 150rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.img {
				height: 110rpx;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				overflow: hidden;

				image {
					width: 100rpx;
					margin-bottom: 10rpx;
				}
			}

			.text {
				width: 90%;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	// .popup{
	//         position: relative;
	//         width: 650rpx;
	//         height: 600rpx;
	//         background: #FFFFFF;
	//         border-radius: 40rpx;
	//         display: flex;
	//         flex-direction: column;
	//         align-items: center;
	// 		padding: 50rpx;
	//         .text,.title{
	// 		 width: 600rpx;
	//           height: 148rpx;
	//           font-size: 30rpx;
	//           font-family: PingFangSC-Regular, PingFang SC;
	//           font-weight: 400;
	//           color: #38393E;
	//           text-align: center;
	//           line-height: 36rpx;
	//         }
	// 		.title{
	// 			font-size: 46rpx;
	// 			color: #000;
	// 		}
	//         .caozuo{
	//           position: absolute;
	//           bottom: 0;
	//           left:0 ;
	//           width: 100%;
	//           height: 140rpx;
	//           display: flex;
	//           justify-content: space-between;
	//           align-items: center;
	//           border-top: 2rpx solid #979797;
	//         }
	//         .confirm,{
	//           width: 100%;
	//           height:136rpx;
	//           font-size: 40rpx;
	//           font-family: Inter-Regular, Inter;
	//           font-weight: 400;
	//           color: #000;
	//           line-height:136rpx;
	//           text-align: center;
	//         }
	//       }
	// 	  .mask {
	// 	  	position: fixed;
	// 	  	top: 0;
	// 	  	background-color: #b6b4b4;
	// 	  	width: 100vw;
	// 	  	height: 100vh;
	// 	  	z-index: 999;
	// 	  	opacity: 0.7;
	// 	  }
	.mask {
		position: fixed;
		top: 0;
		background-color: #b6b4b4;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		opacity: 0.7;
	}

	.popup {
		width: 80%;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		z-index: 9999;
		border-radius: 10px;
		padding: 60rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		border: 2px solid #ccc;

		.caozuo {
			margin: 60rpx auto;
			padding: 0 10px;
			width: 250rpx;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border-radius: 10px;
			color: #fff;
			background: linear-gradient(to bottom, #f9a73d, #efd14f);
		}
	}
</style>